<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
    <!-- 表单验证 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/localization/messages_zh.min.js"></script>
    <style>
        /* .box {
            margin-top: 100px;
            border: 2px solid black;
            width: 1150px;
            height: 680px;
            margin: auto;
            margin-top: 140px;
        } */

        .layui-row {
            width: 1000px;
            height: 680px;
            margin: 0 auto;
            background-image: url("https://pic.616pic.com/bg_w1180/00/00/67/zlaBttBFgi.jpg!/fw/1120");
            background-repeat: no-repeat;
            background-size: cover;

        }

        #myform {
            margin-top: 160px;
            float: right;
            margin-right: 85px;
            margin-bottom: 20px;
        }

        h2 {
            margin: auto;
            text-align: center;
            font-size: 35px;
            margin-top: 60px;
        }
    </style>

<body>
    <h2>注册</h2>
    <div class="box">
        <div class="layui-row" style="margin-top: 50px;">
            <form class="layui-form layui-col-md4  layui-col-md-offset4" id="myform">
                <div class="demo-reg-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="nickname" value="" lay-verify="required |nickname" placeholder="昵称"
                                autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="number" value="" lay-verify="required|number" placeholder="账号"
                                autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required|password"
                                placeholder="密码" autocomplete="off" class="layui-input" id="reg-password"
                                lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
                                placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-cellphone"></i>
                            </div>
                            <input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号"
                                lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-email"></i>
                            </div>
                            <input type="email" name="email" value="" lay-verify="required|email" placeholder="请填写邮箱"
                                autocomplete="off" class="layui-input" id="reg-email">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
                    </div>
                </div>
            </form>
        </div>
        <script>
            layui.use(function () {
                var $ = layui.$;
                var form = layui.form;
                var layer = layui.layer;
                var util = layui.util;
                // 自定义验证规则
                form.verify({
                    nickname: function (value) {
                        if (!/^[\u4e00-\u9fa5]{4,10}$/.test(value)) {
                            return '用户名必须 4 到 10 位，且为汉字';
                        }
                    },
                    password: function (value) {
                        if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,10}$/.test(value)) {
                            return '密码必须 6 到 10 位，且包含数字和大小写';
                        }
                    },
                    // 确认密码
                    confirmPassword: function (value, item) {
                        var passwordValue = $('#reg-password').val();
                        if (value !== passwordValue) {
                            return '两次密码输入不一致';
                        }
                    },
                });

                // 提交事件
                form.on('submit(demo-reg)', function (data) {
                    var field = data.field; // 获取表单字段值
                    // 显示填写结果，仅作演示用
                    layer.alert(JSON.stringify(field), {
                        title: '当前填写的字段值'
                    });
                    // console.log( $("input").eq(0).val(), $("input").eq(2).val());
                    //保存到本地储存
                    $('form').prop('action', './登录.html')
                    localStorage.setItem("nickname", $("input").eq(0).val())
                    localStorage.setItem("password", $("input").eq(2).val())
                    // return true; 
                });
            });
            //   $("#myform").validate({  
            //     onsubmit:false
            // })
        </script>
</body>

</html>